﻿<template>
  <!-- 模板中的输入框，使用 ref 属性添加模板引用 -->
  <input ref="input" />
  <button @click="focusInput">Focus the input</button>
  <p></p>
  <input :ref="setInputRef">
  <p>ref实现: {{ inputValue }}</p>
<p></p>
  <div></div>
  <a ></a>
  <!-- 列表元素使用 v-for 和 ref，ref 会存储为一个数组 -->
  <ul>
    <li v-for="item in list" :key="item" ref="items">
      {{ item }}
    </li>
  </ul>
 <child></child>
  <!-- 子组件的引用 -->
  <Child style="color: red" ref="child" />
</template>

<script>
import Child from './Child.vue' // 引入子组件

export default {
  components: {
    Child // 注册子组件
  },
  data() {
    return {
      list: ['item1', 'item2', 'item3'] ,// 数据列表
      inputElement: null,  // 用于存储输入元素的引用
      inputValue: ''
    };
  },

  methods: {
    focusInput() {
      this.$refs.input.focus();
      console.log(this.$refs)
    },
    setInputRef(el) {
      this.inputElement = el;
      if (el) {
        // 当元素存在时，即元素被挂载时，可以在这里添加额外的DOM操作或事件监听器
        el.addEventListener('input', this.updateValue);
      } else {
        // 当el为null时，即元素被卸载时，可以在这里清理事件监听器
        this.inputElement.removeEventListener('input', this.updateValue);
      }
    },
    updateValue(event) {
      this.inputValue = event.target.value;  // 更新数据属性以反映输入的变化
    }
  },
  mounted() {
    // 挂载后，设置输入框焦点
    this.$refs.input.focus();
    // 打印由 v-for 创建的 DOM 元素数组
    console.log(this.$refs.items);
    // 访问子组件实例
    console.log(this.$refs.child);
  }
}


</script>

<style>
/* CSS 样式 */
</style>
